<template>
  <div>
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <div class="hot_search"  v-if="isShow">
      <p class="hot_title">热门搜索</p>
      <ul class="hot_name_wrap">
        <li
          class="hot_item"
          v-for="(obj, index) in list"
          :key="index"
          @click="btn(obj.first)"
        >
          {{ obj.first }}
        </li>
      </ul>
    </div>
      <!-- 最佳匹配 -->
      <div v-else>
      <div > 
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
        >
          <van-cell v-for="item in resultList" :key="item.id">
            <template>
              <div class="song_item_wrap">
                <div class="song_left">
                  <p>{{ item.name }}</p>
                  <p>
                    <span v-for="obj in item.ar" :key="obj.id">
                      {{ obj.name }}</span
                    >
                    <span>{{ item.al.name }}</span>
                  </p>
                </div>
                <div class="song_right">
                  <i class="iconfont icon-bofang"></i>
                </div>
              </div>
            </template>
          </van-cell>
        </van-list>
      </div>
    </div>
</div>
</template>

<script>
import { hotSearchAPI, search } from "../api";
function debounce(fn, theTime) {
    return function () {
        clearTimeout(fn.timer);
        fn.timer = setTimeout(() => {
            fn.call(this, ...arguments);
        }, theTime);
    }
}
export default {
  data() {
    return {
      value: "",
      list: [],
      resultList: [],
      loading: false,
      finished: false,
      isShow: true,
       isClick: false, // 非点击(状态), 没点击过搜索文字
    };
  },
  async created() {
    const res = await hotSearchAPI();
    this.list = res.data.result.hots;


     // 问题: 输入框输入频繁, 触发网络请求频繁
   // 优化: 下面
    // 给this添加一个watch触发的方法
    // 防抖: 计时n秒, 到达了才执行最后一次
    this.getFn = debounce(this.getResultFn, 1000)
  },
 
  methods: {
    btn(first) {
      this.isClick = true; // 点击开始搜索
      this.value = first;
      this.getResultFn()
    },
    async getResultFn() {
      const res = await search({
        keywords: this.value,
      });
       
      if (!res.data.result) {
        this.resultList = [];
        this.isShow = true
      } else {
        this.resultList = res.data.result.songs;
        this.finished = true;
        this.isShow = false
      }
       this.isClick = false; // isClick改回来, 回归初始化
    },
  },
   watch: {
    value() {
       if (!this.isClick) { // 如果是点击触发了网络请求 this.isClick应该是true, 这里就不要在执行防抖的防落请求
        this.getFn();
      }
    },
  },
};
</script>

<style scoped>
/* 热门搜索 */
.hot_search {
  padding: 0.266667rem;
}
.hot_title {
  font-size: 0.32rem;
  color: #666;
}
.hot_name_wrap {
  margin: 0.266667rem 0;
}
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}

.van-cell {
  padding: 0.133333rem 0.266667rem;
  border-bottom: 1px solid #ccc;
}

/*歌单样式*/
.song_item_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 歌曲列表 */
.song_right {
  padding-right: 0.266667rem;
  line-height: 1.066667rem;
}

/* 歌曲_名字 */
.song_left {
  width: 8rem;
}
.song_left p:first-child {
  font-size: 0.453333rem;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song_left p:last-child {
  font-size: 0.32rem;
  color: #888;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 播放图标 */
.song_right i {
  display: inline-block;
  transform: scale(1.3);
}
</style>